<template>
  <div class="login" :style="{ background: 'url(' + bg + ') no-repeat' }">
    <hry-header
      title=""
      :showBackBtn="false"
      :needBackground="false"
      backRouterName="home"
    >
      <div slot="content" class="normal-wrapper">
        <md-scroll-view
          ref="scrollView"
          :scrolling-x="false"
          :auto-reflow="true"
        >
          <img src="@/assets/img/logo_01.png" alt="" />
          <div class="form-wrapper">
            <form novalidate @submit.prevent="validateBeforeSubmit">
              <div class="login-title">
                <span class="active">登录</span>
              </div>
              <div>
                <md-field>
                  <input-validate
                    v-model="formData.mobile"
                    placeholder="请输入您的手机号"
                    v-validate="'required|mobile'"
                    name="mobile"
                    type="phone"
                    icon="iconshouji1"
                    data-vv-value-path="innerValue"
                    data-vv-validate-on="input"
                    data-vv-as="您的手机号"
                    :error="errors.first('mobile')"
                  >
                  </input-validate>
                  <input-validate
                    v-model="formData.password"
                    placeholder="输入您的密码"
                    type="password"
                    name="password"
                    icon="iconmima"
                    v-validate="'required'"
                    data-vv-value-path="innerValue"
                    data-vv-validate-on="input"
                    data-vv-as="您的密码"
                    :error="errors.first('password')"
                  >
                  </input-validate>
                </md-field>
              </div>
              <div class="login-btn">
                <md-button type="primary" block @click="validateBeforeSubmit"
                  >登 录</md-button
                >
              </div>
            </form>
          </div>
        </md-scroll-view>
      </div>
    </hry-header>
  </div>
</template>

<script>
import bg from "@/assets/img/login_bg.png";
import { ScrollView, Field, Button } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.mobile("mobile", "请输入正确的手机号");
export default {
  name: "",
  components: {
    [Button.name]: Button,
    [ScrollView.name]: ScrollView,
    inputValidate,
    hryHeader: () => import("@/components/contentWrapper/index"),
    [Field.name]: Field
  },
  data() {
    return {
      bg: bg,
      visible: false,
      type: "",
      title: "",
      isChecked: true,
      formData: {
        mobile: "",
        password: "",
        code: ""
      },
      imgUrl: ""
    };
  },
  methods: {
    validateBeforeSubmit() {
      this.$validator.validate().then(result => {
        if (result) {
          this.$ajax
            .post(this.$api.login, this.formData, false, "登录中")
            .then(res => {
              localStorage.setItem(
                "dtoken",
                this.$crypto.setAES(res.data.token)
              );
              this.$router.push({ name: "home" });
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    }
  },
  created() {
    let token = localStorage.getItem("dtoken");
    if (token) {
      this.$router.push({ name: "home" });
    }
  }
};
</script>

<style scoped lang="stylus">
.login {
  height: 100%;
  width: 100%;
  background-size: 100%, 100% !important;
}
  .normal-wrapper {
    height: 100%;
    width: 100%;
    padding: 0 20px 0 20px;
    box-sizing border-box
    text-align: center;
  }
  .normal-wrapper img {
    margin-top: 20px;
    margin-bottom: 40px;
  }
  .form-wrapper {
    position: relative;
    text-align: left;
    margin: 10px 20px 62px 20px;
    padding: 30px 34px;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(254, 226, 212, 1);
  }
  .login-btn {
    text-align center;
    color #ffffff;
    background-color #fd7400;
    margin 20px auto;
    width: calc(100% - 70px);
    font-size: 30px;
  }
.login-title {
  font-size: 30px;
  margin-bottom: 20px;
  .active {
    color: #3e4a59;
    font-size: 48px;
  }
}
</style>
